<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <link rel="stylesheet" href="/static/css/style0.css">
    <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-btn-primary {
            border: 0px solid #C9C9C9;
            background-color: #fff;
            color: #555;
        }
        .layui-card-body{
            text-align: center;
        }
        .layui-card-body span{
            line-height: 30px;
        }
    </style>
</head>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">个人信息</a>
                <a><cite>个人基本信息</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid" id="divvuehtml">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form" id="add">
                        <input type="hidden" name="id" v-model="user.id"/>
                        <table class="layui-table" lay-size="sm">
                            <thead>
                            <tr>
                                <th colspan="4" style="text-align: center;">修改个人基本信息</th>
                            </tr>
                            </thead>
                            <tbody style="text-align: center;">
                            <tr>
                                <td>用户姓名</td>
                                <td colspan="3">
                                    <input type="text" name="username" v-model="user.username" required lay-verify="required" lay-verType="tips"  lay-reqText="姓名不能为空" placeholder="请输入姓名"  autocomplete="off" class="layui-input">
                                </td>
                            </tr>
                            <tr>
                                <td>用户密码</td>
                                <td colspan="3">
                                    <input type="text" name="pwd" v-model="user.pwd" required lay-verify="required" lay-reqText="用户密码不能为空"  placeholder="请输入用户密码"  autocomplete="off" class="layui-input">
                                </td>
                            </tr>
                            <tr>
                                <td>性别</td>
                                <td colspan="3">
                                    <select name="sex" v-model="user.sex"  required lay-verify="required" lay-filter="membersex">
                                        <option value=""></option>
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>联系方式</td>
                                <td colspan="3">
                                    <input type="text" name="phone" v-model="user.phone" required lay-verify="required" lay-reqText="联系方式不能为空"  placeholder="请输入联系方式"  autocomplete="off" class="layui-input">
                                </td>
                            </tr>
                            <tr >
                                <td colspan="4">
                                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">修改</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/xadmin.js"></script>
<script type="text/javascript" src="/static/js/vue.js"></script>
<script th:inline="none">
    var ve = new Vue({
        el: '#divvuehtml',//绑定vue渲染范围
        data: {
            user:{}
        },created: function () {//vue在打开html也没初始化创建函数
            this.ininUser();
        },mounted: function () {//初始化html完成后在进行操作
            setTimeout(function() {
                layui.use(['table','form','layer','laydate'],function() {
                    var form = layui.form;
                    var layer = layui.layer;
                    var laydate = layui.laydate;
                    //执行一个laydate实例
                    laydate.render({
                        elem: '#rzdate', //指定元素
                    });
                    //监听提交
                    form.on('submit(formDemo)', function(data){
                        var index;
                        $.ajax({
                            url : "/LoginServlet?method=up",
                            type : "POST",
                            data : data.field,
                            dataType : "json",
                            beforeSend : function(XMLHttpRequest) {
                                index = layer.msg('正在提交数据中，请稍候', {
                                    icon : 16,
                                    time : false,
                                    shade : 0.8
                                });
                            },success : function(data) {
                                if(data.success){
                                    // 刷新父页面
                                    layer.alert(data.msg, {
                                        icon : 6
                                    });
                                    // 刷新父页面
                                    ve.ininUser();
                                }else{
                                    xadmin.alert(data.msg,2)
                                }
                            },complete : function(XMLHttpRequest, textStatus) {
                                layer.close(index);
                            },error : function(data) {
                                layer.alert('网络异常或者数据错误', {
                                    icon : 2
                                });
                            }
                        });
                        return false;
                    });
                });
            },100)
        },methods: {//调用函数
            ininUser:function () {
                $.get("/LoginServlet?method=get",function(data){
                    if(data.success){
                        ve.user = data.data;
                    }else{
                        xadmin.alert(data.msg,{icon:2});
                    }
                },"json")
            }
        },updated: function () {
            layui.use(['form'], function(){
                var form = layui.form;
                form.render();
            })
        }
    })
</script>
</html>
